<template>
    <rui-page :defines="defines">
        <div style="background-color: #f9fafc;">
            <Alert show-icon style="height: 30px;">
                <div style="margin-top:-2px" >请输入查询条件</div>
            </Alert>
            <rui-query
                ref="searchForm"
                :query="queryData"
                :query-rows="searchFormOptions"
            />
       </div>
        <div style="background-color: #f9fafc;">
            <rui-table
                :defineId="'creditOption'"
                :fixedLeft="['opt']"
                :showIndex="false"
                :select="false"
                :columns="optinColumns"
                :slots="[{key:'opt',slot:'opt'}]"
                @loadDatas="queryData"
                ref-query="searchForm"
                ref="creditTable"
            >
                <template slot="toolBar">
                    <Button @click="add" type="primary" icon="md-add">新增</Button>
                </template>
                <template slot="opt" slot-scope="{ row }">
                    <div>
                        <Button @click="edit(row)" size="small" type="primary" icon="ios-create">编辑</Button>
                        <Button type="error" size="small" @click="remove(row)" icon="md-trash">删除</Button>
                    </div>
                </template>
            </rui-table>
        </div>
        <Modal
            v-model="optionModalVisible"
            :title="modalTitle"
            :closable="false"
            :width="800"
            :mask-closable="false"
            @on-ok="optionSubmit"
        >
            <rui-form :form-options="optionFormOptions" :read-only="false"
                      ref="optionForm" style="margin-left:4%;margin-top:-30px;height: 320px;">
                <template slot="showPeople" slot-scope="{ key,data }">
                            <span>
                                 <Select v-model="data[key]" multiple style="width:200px">
                                    <Option v-for="item in locationData" :value="item.userRealName" :key="item.userId">{{ item.userRealName }}</Option>
                                </Select>
                            </span>
                </template>
            </rui-form>

            <div slot="footer">
                <Button size="small" type="primary"  @click="optionModalVisible = false" icon="ios-backspace">取消</Button>
                <Button type="primary" size="small" @click="optionSubmit" icon="md-bookmark">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<script>
    import creditOptionDefine from "../defines/credit-option-define";
    import {
        getOptionList,
        addOption,
        editOption,
        deleteOption
    } from "@/projects/afs-core-business/api/afs-case/credit-option/creditOption";
    //调取基础库api所有用户信息
    import {
        getUserListData
    } from "@/projects/basic/api/admin/user";
    import {deepClone} from "@/libs/utils/ObjectClone";
    export default {
        name: "credit-option",
        data() {
            return {
                locationData: [],
                optionModalVisible: false,
                modalTitle: "新增参数信息",
                searchFormOptions: [
                    {defineId: "creditOption", span: 6, fields: ["parameterName","status"]}
                ],
                optionFormOptions: [
                    {
                        grids: [
                            {
                                defineId: "creditOption",
                                span: 10,
                                fields: ['parameterName','controlType','dataDicId']
                            },
                            {
                                defineId: "creditOption",
                                span: 10,
                                fields: ['showPeople','status','showBusinessType'],
                                slots: [{key: 'showPeople', slotName: 'showPeople'}]
                            },
                            {
                                defineId: "creditOption",
                                span: 10,
                                fields: ['carType','carNature']
                            },
                            {
                                defineId: "creditOption",
                                span: 10,
                                fields: ['operateWay','affiliatedWay'],
                            }
                        ]
                    }
                ],
                optinColumns: [
                    'opt', 'parameterName', 'controlType','dataDicId','showPeople','showBusinessType','status','createTime','carType','carNature','operateWay','affiliatedWay'
                ],

            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "creditOption",
                        fields: creditOptionDefine
                    }
                ];
            }
        },
        methods: {
            getAll(){
                let params="";
                params={
                    pageSize:200,
                    pageNumber:1,
                    deptId:this.$store.state.user.userInfo.deptId
                }
                getUserListData(params).then(res => {
                    if (res.code === "0000") {
                        this.locationData = res.data.records;

                    }
                });
            },

            queryData(queryData) {
                getOptionList(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        records.forEach(function (re) {
                            re.showPeople=re.showPeople.split(",");

                            if (re.carType ) {
                                re.carType = re.carType.split(',');
                            }
                            if (re.carNature ) {
                                re.carNature = re.carNature.split(',');
                            }if (re.operateWay ) {
                                re.operateWay = re.operateWay.split(',');
                            }
                            if (re.affiliatedWay) {
                                re.affiliatedWay = re.affiliatedWay.split(',');
                            }

                        })
                        this.$refs.creditTable.updateTableData(records, total);
                    }
                });
            },
            refresh() {
                this.$refs['creditTable'].reloadData();
            },

            optionSubmit() {
                this.$refs.optionForm.getForm().validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            let data = this.$refs.optionForm.getFormData();
                            data.showPeople = data.showPeople.join(',');
                            if (data.carType) {
                                data.carType = data.carType.join(',');
                            }
                            if (data.carNature) {
                                data.carNature = data.carNature.join(',');
                            }if (data.operateWay ) {
                                data.operateWay = data.operateWay.join(',');
                            }
                            if (data.affiliatedWay) {
                                data.affiliatedWay = data.affiliatedWay.join(',');
                            }
                            addOption(data)
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.refresh();
                                        this.optionModalVisible = false;
                                    }
                                    if (res.code === "0001") {
                                        this.$Message.error(res.msg);
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        } else {
                            // 编辑
                            let data = this.$refs.optionForm.getFormData();
                            data.showPeople = data.showPeople.join(',');
                            if (data.carType ) {
                                data.carType = data.carType.join(',');
                            }
                            if (data.carNature) {
                                data.carNature = data.carNature.join(',');
                            }if (data.operateWay ) {
                                data.operateWay = data.operateWay.join(',');
                            }
                            if (data.affiliatedWay ) {
                                data.affiliatedWay = data.affiliatedWay.join(',');
                            }
                            editOption(data)
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.optionModalVisible = false;
                                        this.refresh();
                                    }
                                    if (res.code === "0001") {
                                        this.$Message.error(res.msg);
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        }
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除参数: " + v.parameterName + " ?",
                    onOk: () => {
                        deleteOption(v.id).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        });
                    }
                });
            },
            add() {
                this.$refs.optionForm.resetFrom();
                this.modalType = 0;
                this.modalTitle = "新增";
                this.optionModalVisible = true;
                this.$refs.optionForm.setFieldRequired("parameterName",true);
                this.$refs.optionForm.setFieldRequired("controlType",true);
                this.$refs.optionForm.setFieldRequired("dataDicId",true);
                this.$refs.optionForm.setFieldRequired("showPeople",true);
                this.$refs.optionForm.setFieldRequired("showBusinessType",true);
                this.$refs.optionForm.setFieldRequired("status",true);
                this.$refs.optionForm.setFieldRequired("carType",false);
                this.$refs.optionForm.setFieldRequired("carNature",false);
                this.$refs.optionForm.setFieldRequired("operateWay",false);
                this.$refs.optionForm.setFieldRequired("affiliatedWay",false);

            },
            edit(row) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                this.$refs.optionForm.updateFormData(row);
                this.$refs.optionForm.setFieldRequired("parameterName",true);
                this.$refs.optionForm.setFieldRequired("controlType",true);
                this.$refs.optionForm.setFieldRequired("dataDicId",true);
                this.$refs.optionForm.setFieldRequired("showPeople",true);
                this.$refs.optionForm.setFieldRequired("showBusinessType",true);
                this.$refs.optionForm.setFieldRequired("status",true);
                this.$refs.optionForm.setFieldRequired("carType",false);
                this.$refs.optionForm.setFieldRequired("carNature",false);
                this.$refs.optionForm.setFieldRequired("operateWay",false);
                this.$refs.optionForm.setFieldRequired("affiliatedWay",false);
                this.optionModalVisible = true;
            },
        },
        mounted() {
            this.getAll();
            this.refresh();
        }
    };
</script>
